<template>
	<div>
		<el-card>
			<el-form :model="state.dataForm" :rules="state.dataRule" ref="dataFormRef">
				<!-- <v-form-render :form-json="state.formJson" :form-data="state.formData" :option-data="state.optionData" ref="vFormRef"> </v-form-render> -->
        <div v-for="(item, index) in state.vformList" :item="item" :index="index" :key="index + 1">
          <v-form-render :form-json="item" :form-data="{}" :option-data="{}" ref="vFormRef"> </v-form-render>
        </div>
      </el-form>
			<footer class="el-dialog__footer" style="text-align: center">
				<span class="dialog-footer">
					<el-button @click="handleClose()">取消</el-button>
					<el-button type="primary" @click="dataFormSubmit(dataFormRef)">确定</el-button>
				</span>
			</footer>
		</el-card>
	</div>
</template>
<script setup lang="ts" name="dynamicAppBusinessAdd">
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { FormInstance, MessageParamsWithType, ElMessage, ElLoading } from 'element-plus';
import { developApi } from '/@/api/sys/develop-api';
import { post } from '/@/api/http';
import mittBus from '/@/utils/mitt';
const vFormRef = ref();
const dataFormRef = ref<FormInstance>();
const route = useRoute();
const { proxy } = getCurrentInstance() as any;
const state = reactive({
  vformList: [] as any,
	params: {
		path: '',
		params: {} as any,
	},
	formData: {},
	optionData: {},
	customizeApi: '0',
	addApiUrl: '',
	formJson: {
		widgetList: [],
		formConfig: {
			modelName: 'formData',
			refName: 'vForm',
			rulesName: 'rules',
			labelWidth: 80,
			labelPosition: 'left',
			size: '',
			labelAlign: 'label-left-align',
			cssCode: '',
			customClass: '',
			functions: '',
			layoutType: 'PC',
			jsonVersion: 3,
			onFormCreated: '',
			onFormMounted: '',
			onFormDataChange: '',
			onFormValidate: '',
		},
	},
	dataForm: {
		formData: {},
		taskParam: {
			defKey: '',
		},
		designerId: '',
		designerCode: '',
		designerName: '',
	},
	dataRule: {},
});

const initFormJson = (designerCode: string) => {
	// developApi.getSysBusinessDesignerByCodeHasJson(designerCode, '1').then((data) => {
	// 	if (data && data.code === 0) {
	// 		vFormRef.value.setFormJson(data.data.newFormJson)
	// 		state.dataForm.designerId = data.data.id
	// 		state.dataForm.designerCode = data.data.designerCode
	// 		state.dataForm.taskParam.defKey = data.data.taskDefCode
	// 		state.customizeApi = data.data.customizeApi
	// 		state.addApiUrl = data.data.addApiUrl
	// 	}
	// })
	const loading = ElLoading.service({
		lock: true,
		text: '处理中',
		background: 'rgba(0, 0, 0, 0.7)',
	});
	developApi
		.getLatestInfoByCode(designerCode)
		.then((data) => {
			if (data && data.code == 0) {
        state.vformList = data.data.componentList.map((item: any) => JSON.parse(item.formDesJson))
        state.dataForm.designerId = data.data.id
        state.dataForm.designerCode = data.data.designerCode
        state.dataForm.taskParam.defKey = data.data.taskDefCode
        state.customizeApi = data.data.customizeApi
        state.addApiUrl = data.data.addApiUrl
			} else {
				ElMessage.error(data.message);
			}
		})
		.catch(() => {
			ElMessage.error('查询表单数据失败');
		})
		.finally(() => {
			loading.close();
		});
};

// 页面加载时
onMounted(() => {
	state.params = <any>route;
  window.console.log(route);
	state.dataForm.designerName = state.params.params.tagsViewName;
	initFormJson(state.params.params.id);
});

const handleClose = () => {
	mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
};

//提交表单
const dataFormSubmit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	vFormRef.value
		.getFormData()
		.then((formData: any) => {
			state.dataForm.formData = formData;
			const loading = ElLoading.service({
				lock: true,
				text: '处理中',
				background: 'rgba(0, 0, 0, 0.7)',
			});
			if (state.customizeApi === '1') {
				//自定义后端接口的情况
				post({
					url: state.addApiUrl,
					data: state.dataForm,
				})
					.then((data) => {
						if (data && data && data.code === 0) {
							ElMessage.success('提交成功');
							handleClose();
						} else {
							ElMessage.error(data.message);
						}
					})
					.catch(() => {
						ElMessage.error('提交数据失败');
					})
					.finally(() => {
						loading.close();
					});
			} else {
				//默认的后端接口，以json格式存储表单数据
				developApi
					.submitBusinessCommonAdd(state.dataForm)
					.then((data) => {
						if (data && data.code === 0) {
							ElMessage.success('提交成功');
							handleClose();
						} else {
							ElMessage.error(data.message);
						}
					})
					.catch(() => {
						ElMessage.error('提交数据失败');
					})
					.finally(() => {
						loading.close();
					});
			}
		})
		.catch((error: MessageParamsWithType | undefined) => {
			ElMessage.error(error);
		});
};
</script>